<template>
  <div class="wp">
  <van-swipe>
  <van-swipe-item>
  <img src="@/assets/1_1.png" class="pic_1"/>
  </van-swipe-item>
  <van-swipe-item>
  <img src="@/assets/1_2.png" class="pic_1"/>
  </van-swipe-item>
  <van-swipe-item>
  <img src="@/assets/1_3.png" class="pic_1"/>
  <button class="btn" @click="btn">进入</button>
  <p></p>
  </van-swipe-item>
   </van-swipe>
  </div>
</template>

<script>
export default {
  // 定义属性
  data () {
    return {
    }
  },
  // 计算属性，会监听依赖属性值随之变化op
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    btn () {
      this.$router.push('/layout')
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  }
}
</script>

<style lang='less'>
.wp{
    background-color: #21272e;
    height: 1624px;
}
.van-swipe{
    height: 1624px;
}
.pic_1{
    width: 80%;
    margin-top: 192px;
    margin-left: 72px;
}
.van-swipe__indicators{
bottom: 264px;
}
.van-swipe__indicator--active{
    width: 36px;
    height: 12px;
    border-radius:8px ;
    background-color: #d9dade;
}
.van-swipe__indicator{
    width: 36px;
    height: 12px;
    border-radius:8px ;
}
.van-swipe__indicator:not(:last-child){
    margin-right: 20px;
}
.btn{
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 750px;
  height: 142px;
  border:none ;
  background-color: #2e363f;
  font-family: PingFang-SC-Medium;
  font-size: 44px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #dcdeea;
}
p{
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%);
    margin: 0;
 width: 270px;
 height: 8px;
 background-color: #71768c;
 border-radius:8px ;
}
</style>
